<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>table模块快速使用</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/viewer/viewer.css}"/>

    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/layui/layui.js}"></script>
    <script th:src="@{/static/layui/wk.js}"></script>
    <script th:src="@{/static/viewer/viewer.js}"></script>

</head>

<body style="height: 100%">

<form class="layui-form" action="" autocomplete="new-password">
    <input type="hidden" th:field="${model.uid}" />

    <div class="layui-form-item" th:if="${model.uid ne '1'}" >
        <label class="layui-form-label">登录账号</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <input th:field="${model.loginName}"  lay-verify="required" placeholder="请输入登录账号"
                   autocomplete="new-password" class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <input type="password" th:name="loginPwd" th:id="loginPwd"  placeholder="请输入密码,不填写则为不修改" autocomplete="off"
                   class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item" th:if="${model.uid ne '1'}">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <input type="text" th:field="${model.nickName}" lay-verify="required" placeholder="请输入昵称" autocomplete="off"
                   class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="height: 137px; line-height: 117px">头像</label>
        <input th:name="userImg" th:id="userImg" th:value="${model.userImg}" lay-verify="required" autocomplete="off" class="layui-input" type="hidden"/>
        <div class=" layui-upload-drag" id="img" style="position:relative;left:10px">
            <i class="layui-icon">&#xe654;</i>
            <p>点击上传</p>
            <img th:id="demo1" th:src="@{${url} + ${model.userImg}}"  style="position: absolute;height: 137px;width: 117px;top:0;left:0;"/>
        </div>
    </div>

    <div class="layui-form-item" th:if="${model.uid ne '1'}">
        <div class="layui-inline">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline" >
                <select th:name="roleId" lay-verify="required">
                    <option th:each="role : ${list}" th:selected="${role.roleId eq model.roleId}" th:value="${role.roleId}" th:text="${role.roleName}"></option>
                </select>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button th:id="btn" class="layui-btn" lay-submit="" lay-filter="commit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script th:inline="none">
    layui.use(['upload', 'jquery', 'form', 'util'], function () {
        var $ = layui.jquery
            , upload = layui.upload
            , form = layui.form;

        //监听提交
        form.on('submit(commit)', function (data) {
            var userImg = $("#userImg").val();
            if (userImg == '') {
                layer.msg("请上传图片");
                return false;
            }


            $.ajax({
                url: '/bg/dicUser/edit',
                type: 'post',
                dataType: 'json',
                data: data.field,
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg, {icon: 1, time: 500}, function () {
                            layer.close();
                            window.parent.location.reload();
                        });
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#img'
            , size: 1024 * 5 //限制文件大小，单位 KB
            , url: '/uploadFiles/uploadFileToOSS'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').css('display', 'block').attr('src', result); //链接（base64）
                    $("#btn").attr({"disabled": "disabled"});
                    $("#btn").attr({"class": "layui-btn layui-btn-disabled layui-btn-radius"});
                });
            }
            , done: function (res) {
                // alert(JSON.stringify(res));
                //200成功 500失败
                if (res.code == 200) {
                    $('#userImg').val(res.url);
                    $("#btn").removeAttr("disabled");
                    $("#btn").attr({"class": "layui-btn"});
                } else {
                    return layer.msg('上传失败');
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

    });
</script>

</body>
</html>
